Review: Create paper wireframes for a responsive website
複習：為響應式網站建立紙質線框圖

第一部分：為首頁建立紙面線框圖

1. 準備工具：使用方格紙和筆即可開始。

2. 參考網站地圖：根據之前繪製的網站地圖，確定首頁需要包含哪些內容（如導航、分類、搜尋、登入、購物車等）。

3. 繪製多個版本：至少繪製 4 個不同的首頁線框圖，嘗試不同的頁面佈局方式。常用的線框圖符號包括：
   • 帶“X”的矩形代表 圖片
   • 水平線代表 文字
   • 圓形或箭頭代表 按鈕
   • 帶文字的矩形代表 CTA（號召性動作按鈕）

審查與整合：

• 在每個版本中，標記你最喜歡的部分（加星號）

• 將這些加星的部分整合為一個新的最終首頁線框圖

• 對網站的其它頁面重複以上流程

第二部分：為不同螢幕尺寸建立響應式線框圖

1. 手機版本線框圖：
   • 畫出較窄、較長的頁面框架
   • 根據網格調整首頁元素的佈局和比例
   • 考慮使用“漢堡選單”、“卡片”、“輪播圖”等節省空間的設計

1. 平板版本線框圖：
   • 畫出比手機大、但比桌面小的頁面框架
   • 同樣使用網格來佈局和縮放桌面版中的元素

設計小貼士：

• 在縮小尺寸時，思考哪些元素應隱藏、保留或重新佈局

• 保持頁面簡潔，避免資訊過載

• 注意可訪問性和使用者體驗

自檢清單：

桌面版檢查：

我是否繪製了 4 個不同版本的首頁線框圖？

是否新增了代表影象、文字、按鈕的 佔位符？

是否對比了多個版本並挑選出最佳元素？

是否將最佳元素整合為一個完整的首頁線框圖？

是否對網站的其它頁面也進行了同樣處理？

響應式設計檢查：

我是否在設計中考慮了 不同螢幕尺寸的可用性？

是否考慮了 無障礙設計（如輔助技術的相容性）？

是否在小螢幕設計中減少了雜亂，節省了空間？